<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-table-render</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
          crossorigin="anonymous">
    <style>
        [v-cloak] {
            visibility: hidden;
        }
    </style>
</head>
<body>

<div id="app" v-cloak style="width: 500px; margin: 0 auto">
    <div class="message">
        <v-input v-model="username"></v-input>
        <v-textarea v-model="message" ref="message"></v-textarea>
        <button @click="handleSend">发布</button>
        <list :list="list" @reply="handleReply" @delete="deleteReply"></list>
    </div>
</div>

<script src="https://unpkg.com/vue"></script>
<script>
    Vue.component('vInput', {
        props: {
            value: {
                type: [String, Number],
                default: ''
            }
        },
        render(h) {
            let _this = this;
            return h('div', [
                h('span', '昵称：'),
                h('input', {
                    attrs: {
                        type: 'text',
                        placeholder: '请输入昵称'
                    },
                    domProps: {
                        value: this.value,
                    },
                    on: {
                        input(event) {
                            _this.$emit('input', event.target.value);
                        }
                    }
                })
            ])
        }
    });
    Vue.component('vTextarea', {
        props: {
            value: {
                type: [String, Number],
                default: ''
            }
        },
        render(h) {
            let _this = this;
            return h('div', [
                h('span', '留言内容：'),
                h('textarea', {
                    attr: {
                        placeholder: '请输入留言内容'
                    },
                    domProps: {
                        value: this.value
                    },
                    ref: 'message',
                    on: {
                        input(event) {
                            _this.$emit('input', event.target.value);
                        }
                    }
                }),
            ])
        },
        methods: {
            focus() {
                this.$refs.message.focus();
            }
        }
    });
    Vue.component('list', {
        props: {
            list: {
                type: Array,
                default() {
                    return [];
                }
            }
        },
        render(h) {
            let _this = this;
            let list = [];
            this.list.forEach((msg, index) => {
                let node = h('div', {
                    attrs: {
                        class: 'list-item'
                    }
                }, [
                    h('span', msg.name + '：'),
                    h('div', {
                        attrs: {
                            class: 'list-msg'
                        }
                    }, [
                        h('p', msg.message),
                        h('a', {
                            attrs: {
                                class: 'list-reply'
                            },
                            on: {
                                click() {
                                    _this.handleReply(index);
                                }
                            }
                        }, '回复'),
                        //<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        h('button', {
                            attrs: {
                                type: 'button',
                            },
                            on: {
                                click() {
                                    _this.deleteComment(index);
                                }
                            }
                        }, [
                            h('span', {
                                attrs: {
                                    'aria-hidden': "true"
                                },
                            }, '关闭'),
                        ]),
                    ])
                ]);
                list.push(node);
            });
            if (this.list.length) {
                return h('div', {
                    attrs: {
                        class: 'list'
                    }
                }, list);
            } else {
                return h('div', {
                    attrs: {
                        class: 'list-nothing'
                    }
                }, '留言列表为空');
            }
        },
        methods: {
            handleReply(index) {
                this.$emit('reply', index);
            },
            deleteComment(index) {
                this.$emit('delete', index);
            }
        }
    });

    let app = new Vue({
        el: '#app',
        data: {
            username: '',
            message: '',
            list: []
        },
        methods: {
            handleSend() {
                if (this.username === '') {
                    alert('请输入昵称');
                    return;
                }
                if (this.message === '') {
                    alert('请输入留言内容');
                    return;
                }
                this.list.push({
                    name: this.username,
                    message: this.message
                });
                this.message = '';
            },
            handleReply(index) {
                let name = this.list[index].name;
                this.message = '回复@' + name + '：';
                this.$refs.message.focus();
            },
            deleteReply(index) {
                this.list.splice(index, 1);
            }
        }
    });
</script>
</body>
</html>